﻿<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
  <title>Vega Scaffold</title>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://trifacta.github.com/vega/vega.js"></script>
  <!--<script src="http://trifacta.github.com/vega/d3.geo.projection.min.js"></script>-->
</head>
<body>
<div id="vis"></div>

<script type="text/javascript">
// parse a spec and create a visualization view
function parse(spec) {
  vg.parse.spec(spec, function(chart) { chart({el:"#vis"}).update(); });
}
  parse(JSON.parse('{\
  "width": 300,\
  "height": 480,\
  "data": [\
    {\
      "name": "table",\
      "values": [\
          ***DATA***\
      ]\
    }\
  ],\
  "legends": [\
    {\
      "fill": "color",\
      "title": "Performance tests",\
      "properties": {\
        "symbols": {\
          "fillOpacity": {\
            "value": 0.5\
          },\
          "stroke": {\
            "value": "transparent"\
          }\
        }\
      }\
    }\
  ],\
  "scales": [\
    {\
      "name": "cat",\
      "type": "ordinal",\
      "range": "height",\
      "padding": 0.2,\
      "domain": {\
        "data": "table",\
        "field": "data.test"\
      }\
    },\
    {\
      "name": "val",\
      "range": "width",\
      "type": "linear",\
      "round": true,\
      "nice": true,\
      "clamp": true,\
      "domainMax": 200,\
      "domain": {\
        "data": "table",\
        "field": "data.value"\
      }\
    },\
    {\
      "name": "color",\
      "type": "ordinal",\
      "range": "category10" \
    }\
  ],\
  "axes": [\
    {\
      "type": "y",\
      "scale": "cat",\
      "tickSize": 0,\
      "tickPadding": 8\
    },\
    {\
      "type": "x",\
      "scale": "val",\
      "title": "Time (%)"\
    }\
  ],\
  "marks": [\
    {\
      "type": "group",\
      "from": {\
        "data": "table",\
        "transform": [\
          {\
            "type": "facet",\
            "keys": [\
              "data.test"\
            ]\
          }\
        ]\
      },\
      "properties": {\
        "enter": {\
          "y": {\
            "scale": "cat",\
            "field": "key"\
          },\
          "height": {\
            "scale": "cat",\
            "band": true\
          }\
        }\
      },\
      "scales": [\
        {\
          "name": "pos",\
          "type": "ordinal",\
          "range": "height",\
          "domain": {\
            "field": "data.dir"\
          }\
        }\
      ],\
      "marks": [\
        {\
          "type": "rect",\
          "properties": {\
            "enter": {\
              "y": {\
                "scale": "pos",\
                "field": "data.dir"\
              },\
              "height": {\
                "scale": "pos",\
                "mult": 0.8,\
                "band": true\
              },\
              "x": {\
                "scale": "val",\
                "field": "data.value"\
              },\
              "x2": {\
                "scale": "val",\
                "value": 0\
              },\
              "fill": {\
                "scale": "color",\
                "field": "data.dir"\
              }\
            }\
          }\
        },\
        {\
          "type": "text",\
          "properties": {\
            "enter": {\
              "y": {\
                "scale": "pos",\
                "field": "data.dir"\
              },\
              "dy": {\
                "scale": "pos",\
                "band": true,\
                "mult": 0.5\
              },\
              "x": {\
                "scale": "val",\
                "field": "data.value",\
                "offset": 4\
              },\
              "fill": {\
                "scale": "color",\
                "field": "data.dir"\
              },\
              "align": {\
                "value": "left"\
              },\
              "baseline": {\
                "value": "middle"\
              },\
              "text": {\
                "field": "data.value"\
              }\
            }\
          }\
        }\
      ]\
    }\
  ]\
}'));
</script>
</body>
</html>